
import Masonry from 'masonry-layout';
// import '@/assets/js/ma';

// console.log(window.Masonry)

export default class Grid {
    
    constructor(selector, optioins){
        this.el = selector;
        this.options = Object.assign({}, {
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            gutter: 0,
            percentPosition: false
        }, optioins || {});
        console.log(this.options);
        this.masonry = new Masonry(this.el, this.options);
        // this.layout();
    }
    
    layout(){
        this.masonry.layout();
    }
    
    layoutItems(items, still){
        this.masonry.layoutItems(items, still)
    }
    
    reload(){
        this.masonry.reloadItems();
    }
    
    prepend(elements){
        this.masonry.prepended(elements);
    }
    
    append(elements){
        this.masonry.appended(elements);
    }
    
    add(elements){
        this.masonry.addItems(elements);
    }
    
    remove(elements){
        this.masonry.remove(elements);
    }
    
    empty(){
        this.remove(this.masonry.getItemElements());
    }
    
    data(element){
        return Masonry.data(element)
    }
    
    on(event, listener){
        this.masonry.on(event, listener);
    }
    
    off(event, listener){
        this.masonry.off(event, listener);
    }
    
    once(event, listener){
        this.masonry.once(event, listener);
    }
    
    destroy(){
        this.masonry.destroy();
    }
    
}
